<template>
  <div class="card table-search">
    <el-form ref="formRef" :model="searchParam">
      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">

        <GridItem v-for="key in 9">
          <div style="height: 40px;width: 100%;background-color: #1c2518;margin-bottom: 10px"></div>
        </GridItem>

        <GridItem>
          <div class="operation">
            <el-button type="primary" :icon="Search" @click="search"> 搜索</el-button>
            <el-button :icon="Delete" @click="reset"> 重置</el-button>
            <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
              {{ collapsed ? "展开" : "合并" }}
              <el-icon class="el-icon--right">
                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
              </el-icon>
            </el-button>
          </div>
        </GridItem>

      </Grid>
    </el-form>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";
import {Delete, Search, ArrowDown, ArrowUp} from "@element-plus/icons-vue";
import Grid from "./searchComponents/Grid.vue";
import GridItem from "./searchComponents/GridItem.vue";


//columns
const SearchType =
    "input"
    | "input-number"
    | "select"
    | "select-v2"
    | "tree-select"
    | "cascader"
    | "date-picker"
    | "time-picker"
    | "time-select"
    | "switch"
    | "slider";

// columns // 搜索配置列
// searchParam // 搜索参数
// searchCol  //
// search // 搜索方法
// reset // 重置方法

// 默认值
const props = defineProps({
  // 搜索配置列
  columns: [],
  // searchParam // 搜索参数
  searchParam: {},
  // 响应式布局展示,默认{xs: 1, sm: 2, md: 2, lg: 3, xl: 4}
  searchCol: {xs: 1, sm: 2, md: 2, lg: 3, xl: 4},
  // 搜索方法
  search: {
    type: Function
  },
  // 重置方法
  reset: {
    type: Function
  },
})

// 是否默认折叠搜索项
const collapsed = ref(true);

// 获取响应式断点
const gridRef = ref();
const breakPoint = computed(() => gridRef.value?.breakPoint);

// 判断是否显示 展开/合并 按钮
const showCollapse = true

</script>

<style scoped lang="scss">

</style>
